<template>
	<view class="bg-white">
		<uv-sticky bgColor="#fff">
			<uv-tabs :scrollable='false' :list="tabList" @click="cilck"></uv-tabs>
		</uv-sticky>

		<view v-for="(item,index) in list" :key='index'>
			<view class="flex flex-row flex-y-center">
				<image class="avatar rounded-circle p-4 bg-white"
					:src="item.avatar==''?WEBCONFIG.avatar:item.avatar">
				</image>
				<view>
					<view class="h8  mb-1">{{item.nickname}}</view>
					<view class="h9 text-dark-light-5">{{item.create_at}}</view>
				</view>
			</view>
			<view class="line"></view>
		</view>

		<uni-load-more color="#007AFF" :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { $http } from '@/utils';
	import {  useRefs, useWebConfigStore } from "@/stores";
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const status = ref('loadMore')
	const total = ref(0)
	const queryForm = ref({
		page: 1,
		limit: 20,
		level: "1"
	})

	const tabList = ref([{
		name: '一级团队',
		type: '1'
	}, {
		name: '二级团队',
		type: '2'
	}, {
		name: '三级团队',
		type: '3'
	}])
	const list = ref([])
	onLoad(() => {
		getList()
	})

	const getList = (() => {
		status.value = 'more'
		$http.get('Dealer/getTeam', { data: queryForm.value }).then(res => {
			total.value = res.data.total
			let data = res.data.data
			list.value.push.apply(list.value, data)
			if (list.value.length >= total.value) {
				status.value = 'noMore'
			}
			status.value = 'loadMore'
		})
	})
	const cilck = ((e : any) => {
		queryForm.value.page = 1
		queryForm.value.level = e.type
		list.value.length = 0
		getList()
	})
	//页面触底
	onReachBottom(() => {
		status.value = 'loading'
		queryForm.value.page++
		getList()
	})
</script>

<style>
	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.line {
		width: 100%;
		height: 1px;
		border: 1px solid #F4F4F4;
	}
</style>